<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Door control WebUI</title>
	<link href="jquery-ui-1.10.0.custom/css/cupertino/jquery-ui-1.10.0.custom.css" rel="stylesheet">
	<script src="jquery-ui-1.10.0.custom/js/jquery-1.9.0.js"></script>
	<script src="jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.js"></script>

	<script>
	$(function() {
		$( "#button_toggle_connect" ).button({ icons: { primary: "ui-icon-link" } });
		$( "#button_send" ).button({ icons: { primary: "ui-icon-mail-closed" } });
		$( "#button_dll_init" ).button({ icons: { primary: "ui-icon-play" } });
		$( "#button_dll_close" ).button({disabled: false },{ icons: { primary: "ui-icon-stop"} });
		$( "#button_lock_open" ).button({ icons: { primary: "ui-icon-unlocked" } });
		$( "#button_lock_close" ).button({ icons: { primary: "ui-icon-locked" } });
		$( "#button_inps_r" ).button({ icons: { primary: "ui-icon-comment" } });
		$( "#button_modem_res" ).button({ icons: { primary: "ui-icon-arrowrefresh-1-n" } });
		$( "#button_test_0" ).button();
		$( "#button_clear_log" ).button();
		$( "#tabs" ).tabs();
	});
	</script>

<script type="text/javascript">
	var ws;
	var url;

	function connect() {
	    url = document.getElementById("server_url").value;
	    console.log(url);
	    
	    if ("WebSocket" in window) {
	        ws = new WebSocket(url);
	    } else if ("MozWebSocket" in window) {
	        ws = new MozWebSocket(url);
	    } else {
	        document.getElementById("messages").innerHTML += "This Browser does not support WebSockets\n";
	        return;
	    }
	    ws.onopen = function(e) {
	        document.getElementById("messages").innerHTML += "Client: A connection to "+ws.URL+" has been opened.\n";
	        
	        document.getElementById("server_url").disabled = true;
	        //document.getElementById("button_toggle_connect").innerHTML = "Disconnect";
	        $( "#button_toggle_connect" ).button( "option", "icons", { primary: "ui-icon-link"} );
	        $( "#button_toggle_connect" ).button( "option", "label", "Disonnect" )
	    };
	    
	    ws.onerror = function(e) {
	        document.getElementById("messages").innerHTML += "Client: An error occured, see console log for more details.\n";
	        console.log(e);
	    };
	    
	    ws.onclose = function(e) {
	        document.getElementById("messages").innerHTML += "Client: The connection to "+url+" was closed.\n";
	    };
	    
	    ws.onmessage = function(e) {
	        document.getElementById("messages").innerHTML += "Server: "+e.data+"\n";
	        if (e.data.substr(0, 14) == 'command_inps_r')
	        	{
	        	document.getElementById("inps_r").value = e.data.substr(14, 5);
	        	}
	        if (e.data.substr(0, 14) == 'command_test_0')
	        	{
			    document.getElementById("test_0_res_0").value = e.data.substr(18, 2);
			    }
	        if (e.data.substr(0, 26) == 'command_dll_init result :0')
        	{
		    //$( "#button_dll_open" ).button( "option", "disabled", true );
		    //$( "#button_dll_close" ).button( "option", "disabled", false );
		    }
	        if (e.data.substr(0, 27) == 'command_dll_close result :0')
        	{
		    //$( "#button_dll_open" ).button( "option", "disabled", false );
		    //$( "#button_dll_close" ).button( "option", "disabled", true );
		    }
	    };
	}
	
	function disconnect() {
	    ws.close();
	    document.getElementById("server_url").disabled = false;
	    //document.getElementById("button_toggle_connect").innerHTML = "Connect";
	    $( "#button_toggle_connect" ).button( "option", "icons", { primary: "ui-icon-link"} );
	    $( "#button_toggle_connect" ).button( "option", "label", "Connect" )
	}
	
	function toggle_connect() {
	    if (document.getElementById("server_url").disabled === false) {
	        connect();
	    } else {
	        disconnect();
	    }
	}
	
	function send()
	{
	    if (ws === undefined || ws.readyState != 1) {
	        document.getElementById("messages").innerHTML += "Client: Websocket is not avaliable for writing\n";
	        return;
	    }
	    
	    ws.send(document.getElementById("msg").value);
	    document.getElementById("msg").value = "";
	}
	function send_string(inp_string)
	{
	    if (ws === undefined || ws.readyState != 1) {
	        document.getElementById("messages").innerHTML += "Client: Websocket is not avaliable for writing\n";
	        return;
	    }
	    ws.send(inp_string);
	    document.getElementById("messages").innerHTML += "Client: send " + inp_string + "\n";
	}
	function send_test_0()
	{
	    if (ws === undefined || ws.readyState != 1)
	    {
	        document.getElementById("messages").innerHTML += "Client: Websocket is not avaliable for writing\n";
	        return;
	    }
		var send_str = 'command_test_0 ' + document.getElementById("test_0_arg_1").value + ' ' + document.getElementById("test_0_arg_2").value;
	    ws.send(send_str);
	    document.getElementById("messages").innerHTML += "Client: send " + send_str + "\n";
	}
	function clear_log()
	{
	    document.getElementById("messages").innerHTML = "";
	}

</script>
	<style>
	.ui-widget {
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 2em;
	}
	
	body{
		font: 62.5% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	.ui-icons-custom {
		margin: 0;
		padding: 0;
		width: 24px;
		height: 24px;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
		width: 16px;
		height: 16px;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	.button_mid_size{
		height: 40px;
		width: 200px;
	}
	</style>
</head>
<body>

	<div id="controls">
		<!-- Tabs -->
		<h2 class="demoHeaders">Door control</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Connection</a></li>
				<li><a href="#tabs-2">Controller</a></li>
				<li><a href="#tabs-3">Test</a></li>
			</ul>
			<div id="tabs-1">
				<div id="server">
					<input type="text" name="server_url" id="server_url" class="button_mid_size" 
						value="ws://localhost:9000" />
					<button id="button_toggle_connect" onclick="toggle_connect();"  class="button_mid_size">Connect</button>
				</div>
		
				<div id="message_input">
					<input type="text" name="msg" id="msg" class="button_mid_size"  value="Hello World!" />
					<button id="button_send" onclick="send();" class="button_mid_size" >Send</button>
				</div>
			</div>
			<div id="tabs-2">
				<table>
				<tr>
					<td>
				<!-- <div id="commands_to_door_control_dll">  -->
					<button id="button_dll_init" onclick="send_string('command_dll_init');" class="button_mid_size">DLL init</button>
					</td>
					<td>
					<button id="button_dll_close" onclick="send_string('command_dll_close');" class="button_mid_size">DLL close</button>
					</td>
				</tr>
				<!-- <div id="commands_to_door_control_lock">  -->
				<tr>
				<td>
					<button id="button_lock_open" onclick="send_string('command_lock_open');" class="button_mid_size">Lock open</button>
				</td>
				<td>
					<button id="button_lock_close" onclick="send_string('command_lock_close');"  class="button_mid_size">Lock close</button>
				</td>
				</tr>
				<!--  </div> -->
				<!-- <div id="commands_to_door_control_inps">  -->
				<tr>
				<td>
					<input type="text" name="inps_r" id="inps_r" value="0x--"  size="5" class="button_mid_size" />
				</td>
				<td>
					<button id="button_inps_r" onclick="send_string('command_inps_r');"  class="button_mid_size">Inputs read</button>
				</td>
				</tr>
				<!-- </div> -->
				<tr>
				<td>
				<!-- <div id="commands_to_door_control_modem_res">  -->
					<button id="button_modem_res" onclick="send_string('command_modem_res');"  class="button_mid_size">Modem reset</button>
				</td>
				<td></td>
				</tr>
				<!-- </div> -->
				</table>
			</div>
			<div id="tabs-3">
				<div id="commands_to_door_test_0">
					<input type="text" name="test_0_arg_1" id="test_0_arg_1" value="1" size="3"/>
					<input type="text" name="test_0_arg_2" id="test_0_arg_2" value="2" size="3"/>
					<button id="button_test_0" onclick="send_test_0();">Test 0</button>
					<input type="text" name="test_0_res_0" id="test_0_res_0" value="-" size="3"/>
				</div>
				<div id="GUI controls">
					<button id="button_clear_log" onclick="clear_log();">Clear log</button>
				</div>
			</div>
		</div>

	</div>
	<textarea id="messages" class="box_log" rows="10" cols="45"></textarea>

</body>
</html>